<template>
    <div class="mine">
        <div class="top" >
            <image :src="person.avatar" @tap="showPic(person.avatar)"></image>
            <view class="name">{{person.nickname}}</view>
        </div>
		<view class="middle">
			<view class="row">
				<text class="title">D id</text>
				<text class="content">{{person.loginId}}</text>
			</view>
			<view class="row">
				<text class="title">性别</text>
				<text class="content">{{person.gender==''?'未知':person.gender}}</text>
			</view>
			<view class="row">
				<text class="title">个性签名</text>
				<text class="content">{{person.signature!=''?person.signature:'这个人很懒,什么也没有留下...'}}</text>
			</view>
		</view>
        <div class="bottom" v-show="showAdd">
			<button class="btn" @tap="apply()">加好友</button>
        </div>
    </div>
</template>

<script>
	import { findPerson } from 'api/user';
	import WebSocket from '@/common/websocket.js';
	import util from '@/common/util.js';
	import $store from '@/store/index.js';
	import dateUtil from '@/util/date.js';
    export default {
        data () {
            return {
				index: 0,
				person:{},
				showAdd:true
            }
        },
		onLoad (options) {
			if(options.from=='group'){
				this.getPersonInfo(options.id);
			}else if(options.from=='chat'){
				this.showAdd = false;
				this.getPersonInfo(options.id);
			}else if(options.from=='world'){
				this.getPersonInfo(options.id);
			}
			else{
				this.index = options.index;
				this.person = this.$store.state.searchPeople[this.index];
			}
		},
        methods : {
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: 'none',
					current:url,
					urls:[url]
				});
			},
			//好友申请
            apply(){
				//构造消息
				let message={
					type:'apply-person',
					to:this.person.id,
					from:this.$store.getters.user,
					time:dateUtil.getTimeNow()
				}
				WebSocket.sendMessage(message);
			},
			async getPersonInfo(id){
				uni.showLoading({
					title: '正在拉取用户信息...'
				})
				const { content: res } = await findPerson({
				  id:id
				});
			    if(res=='not found'){
					uni.showToast({
						title:'获取信息失败！',
						icon:'error',
						duration:500
					})
					setTimeout(function() {
						uni.navigateBack({
							animationType:'slide-out-left'
						})
					}, 500);
				}else{
					this.person = res;
				}
			},
        }
    }
</script>

<style>
	.row{
		display: flex;
	}
	.middle{
		padding: 20rpx;
	}
	.title{
		font-weight: 600;
		border-radius: 10rpx;
		padding: 5rpx;
		background-color: #c2b5be;
		margin: 10rpx;
	}
	.content{
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 20rpx;
		word-break:break-all;
	}
    .mine{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 400rpx;
        background: #C8C7CC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top image{
        width:156rpx;
        height: 156rpx;
        border-radius: 156rpx;
    }
    .top .name{
		font-weight: 1000;
		font-size: larger;
        line-height: 80rpx;
    }
    .bottom{
		padding-top: 100rpx;
        text-align: center;
        line-height: 200rpx;
    }
	.logout{
		width: 266rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background-color: #618DFF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.btn{
		background-color: #4CD964;
		color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}
</style>
